<!--
 * @Descripttion: js
 * @Version: 1.0
 * @Author: name
 * @Date: 2021-09-27 13:57:35
 * @LastEditors: name
 * @LastEditTime: 2021-09-27 16:34:49
-->
<template>
  <div class="hello">{{ repositories.data ? repositories.data[0] : '' }}</div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    userName: String,
  },
  setup(props) {
    const repositories = ref([])
    const getUserRepositories = async () => {
      repositories.value = { data: [props.userName] }
    }
    return {
      repositories,
      getUserRepositories,
    }
  },
  data() {
    return {
      user: this.userName,
    }
  },
  watch: {
    userName: 'getUserRepositories',
  },
  mounted() {
    this.getUserRepositories()
  },
  methods: {},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
